<template>
  <div v-if="musiclist && musiclist.length !=0 && isShowList==true" clss="player-list">
   <el-scrollbar class="scroll" ref="scroll">
	   
      <div class="player-list-top">
        <div style="hight:40px">播放列表</div>
        <el-button
          type="text"
          class="vbestui-iconfont icon-close"
          width="30px"
          color="var(--text-main-color)"
          transparent
          @click="closePlayerList"
        ></el-button>
      </div>
      <song-list :songsList="musiclist" player />
    </el-scrollbar>
  </div>
</template>
<script>
// import { theme } from "mixin/global/theme";
// import {forcible} from "mixin/components/forcible-refresh"
import SongList from "components/common/song-list/song-list.vue";
// import Scroll from "common/scroll/Scroll";
export default {
  name: "PlayerList",
  // mixins: [theme,forcible],
  components: { SongList },
  props: ["musiclist","isShowList"],
  data() {
    return {

    };
  },
  methods: {
    closePlayerList() {
      this.$parent.isShowList = false;
    },
  },
  watch: {
    
  },
};
</script>
<style lang="less" scoped>
.player-list {
  width: 500px;
  height: 400px;
  border-radius: 6px;
  overflow: hidden;
  position: absolute;
  box-shadow: 0 0 2px var(--border-tt);
  &-dark {
    background: var(--dark-bg-color);
  }
  &-light,
  &-green {
    background: #fff;
  }
  h4 {
    text-align: center;
  }
  &-top {
    height: 35px;
  }
}
.icon-close {
  position: absolute;
  right: 0px;
  top: 0px;
}
.scroll {
  height: 500px;
}

</style>